<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-md p-6">
    <article
      class="rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4 dark:border-gray-700 dark:bg-gray-900"
    >
      <time datetime="2022-10-10" class="block text-xs text-gray-500 dark:text-gray-400">
        10th Oct 2022
      </time>

      <a href="#">
        <h3 class="mt-0.5 text-lg font-medium text-gray-900 dark:text-white">
          How to center an element using JavaScript and jQuery
        </h3>
      </a>

      <div class="mt-4 flex flex-wrap gap-1">
        <span
          class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100"
        >
          Snippet
        </span>

        <span
          class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100"
        >
          JavaScript
        </span>
      </div>
    </article>
  </body>
</html>
